<template>
  <div class="login-box">
    <el-card>
      <template #header>
        <h4>比特后台登录页面</h4>
      </template>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            clearable
            placeholder="请输入用户名"
            prefix-icon="User"
            @keydown.enter="onLogin"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            clearable
            show-password
            placeholder="请输入密码"
            prefix-icon="Lock"
            @keydown.enter="onLogin"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onLogin"
          >登 录</el-button>
          <el-button @click="onCancle">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  // 导入 ElementPlus 组件库
  import { ElMessage } from 'element-plus'
  // 导入 user Pinia
  import { useUserStore } from '@/stores/user'
  // 导入 router
  import { useRouter, useRoute } from 'vue-router';

  const userStore = useUserStore()

  const router = useRouter()
  const route = useRoute()

  // 表单数据对象
  const loginForm = reactive({
    // 属性名不能随意命名 必须与接口文档相一致
    username: 'admin',
    password: 'admin'
  })

  // 获取表单DOM
  const loginFormRef = ref(null)

  // 表单的校验规则
  const loginFormRules = {
    username: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 3, max: 10, message: '用户名长度是3-10位', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 5, max: 16, message: '密码长度是5-16位', trigger: 'blur' },
    ]
  }

  // 表单登录
  const onLogin = () => {
    loginFormRef.value.validate(async (valid) => {
      // 判断是否有效
      if (!valid) return ElMessage.error('请输入正确的格式')
      /**
       * 采用 try-catch 来处理错误情况 不过由于它只能捕获同步代码 不能捕获异步代码
       * 所以就要在它的前面添加 await 将其变为同步代码
       */
      try {
        // 使用 pinia 的登入 
        await userStore.loginAction(loginForm)
        // 成功 弹出弹框
        ElMessage.success('登录成功')
        // 编程式导航 主动跳转到首页 
        // || 表示优先级 左边的比右边大
        router.push(route.query.redirectUrl || '/')
      } catch (e) {
        // 失败
        ElMessage.error(e.message)
      }
    })
  }

  // 表单重置
  const onCancle = () => {
    loginFormRef.value.resetFields()
  }
</script>

<style scoped lang="scss">
  .login-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url('@/assets/login-bg.svg') center/cover;

    // 采用样式穿透 什么时候应该使用呢
    // 1. 有 scoped
    // 2. 要修改第三方的组件内部的元素样式
    :deep(.el-card__header) {
      display: flex;
      // var() 是传入变量 这样在后期修改的时候可以比较省力
      background-color: var(--el-color-primary);
      align-items: center;
      justify-content: center;
      height: 60px;

      h4 {
        color: #fff;
        font-size: 16px;
        font-weight: 400;
      }
    }

    :deep(.el-card__body) {
      padding: 0;
    }

    .el-form {
      padding: 0 30px;
      width: 40vw;

      .el-form-item {
        margin: 35px 0;

        .el-input {
          height: 40px;
        }

        .el-button {
          width: 60px;
          height: 33px;
        }
      }
    }
  }
</style>